<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>AR</title>
  <link rel="stylesheet" href="../assets/bootstrap.min.css">
  <link rel="stylesheet" href="./index.css">
  <link rel="stylesheet" href="https://sdk.herewhite.com/white-web-sdk/2.0.0-beta.3.css">
</head>
<body style="height: 1080;">
  <!-- <div class="container-fluid banner">
    <p class="banner-text">AI</p>
    <a style="color: rgb(255, 255, 255);fill: rgb(255, 255, 255);fill-rule: evenodd; position: absolute; right: 10px; top: 4px;"
      class="Header-link " href="https://github.com/AgoraIO-Community/AgoraWebSDK-NG/tree/master/Demo">
      <svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
    </a>
  </div> -->

  <div id="success-alert" class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>Congratulations!</strong><span> You can invite others to watch your live by click </span><a href="" target="_blank">here</a>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  
  <div class="container">
    <form id="join-form" name="join-form">
      <div class="row join-info-group">
          <!-- <div class="col-sm">
            <p class="join-info-text">AppID</p>
            <input id="appid" type="hidden" value=""  placeholder="enter appid" required>
            <p class="tips">If you don`t know what is your appid, checkout <a href="https://docs.agora.io/en/Agora%20Platform/terms?platform=All%20Platforms#a-nameappidaapp-id">this</a></p>
          </div>
          <div class="col-sm">
            <p class="join-info-text">Token(optional)</p>
            <input id="token" type="hidden" value=""  placeholder="enter token">
            <p class="tips">If you don`t know what is your token, checkout <a href="https://docs.agora.io/en/Agora%20Platform/terms?platform=All%20Platforms#a-namekeyadynamic-key">this</a></p>
          </div> -->
            <!-- TODO 添加token  Appid -->
          <input id="appid" type="hidden" value="408bc1f7fab04dfa8c7f4baeb3c0e5ed"  placeholder="enter appid" required>
          <input id="token" type="hidden" value="006408bc1f7fab04dfa8c7f4baeb3c0e5edIAAoAuqg7/++KchvnUCfj70eBYhI4HBuoW08qiB8GHwtwz1Ra00AAAAAEAD4YHXYwbWlYAEAAQC+taVg"  placeholder="enter token">
          <div class="col-sm" style="display: flex;">
            <p class="join-info-text" style="margin-right: 10px;">房间号</p>
            <input style="width: 365px;" id="channel" type="text" value="111" placeholder="enter channel name" required>
            
            <!-- <p class="tips">If you don`t know what is your channel, checkout <a href="https://docs.agora.io/en/Agora%20Platform/terms?platform=All%20Platforms#channel">this</a></p> -->
          </div>
      </div>
      <div style="height: 15px;"></div>

      <div class="button-group">
        <button id="audience-join" type="submit" class="btn btn-primary btn-sm">检测设备</button>
        <button id="host-join" type="submit" class="btn btn-primary btn-sm">加入</button>
        <button id="leave" type="button" class="btn btn-primary btn-sm"  >离开</button>
       

        <a  id="shareScreen" href="../shareTheScreen/index.html"    target="_Blank"  class="btn btn-primary btn-sm">协助</a>
        <!-- <button id="openShow" type="button"  class="btn btn-primary btn-sm"  >共享1</button> -->
      </div>
        <!-- 白板 -->
        <div id="whiteboard" style="width: 100%; height: 400px;"></div>
        <!-- Room UUID: -->
        <input style="display: none;" id="room_uuid" type="text" size="32"></input>
        <!-- Room Token: -->
         <input style="display: none;" id="room_token" type="text" size="32"></input>
        <button id="join_room" style="display: none;"  class="btn btn-primary" >Join Whiteborad</button>
        <!-- 新加入代码结束 -->
      <!--  -->
      <div id="footer">
        
        <!-- 底部图片 -->
        <div id="imgeslist">
          
          <!-- <div class="imgbox">
          
            <img src="../assets/img/img1.png"  id="LaserPen">	
            <span class="txt1">激光笔</span>	
              
          </div>
          
          <div id="" class="imgbox">
            <img src="../assets/img/wenben.png" >
            <span id="" class="txt2">
              文本
            </span>
          </div> -->
          <div id="tagging" class="imgbox">
            <img  id="clearMove" src="../assets/img/shanchu.png" >
           
            <span id="clearMove"  class="txt3">
             清空
            </span>
          </div>
          
          <div id="biaozhu" style="z-index: 999;" class="imgbox">
            <img src="../assets/img/tuxing.png" >
            <span   class=" txt4">
              标注
            </span>
          </div>
          <!-- <div id="" class="imgbox">
            <img src="../assets/img/hudong.png" >
            <span id="" class="txt5">
              互动
            </span>
          </div> -->
          
          
        </div>
        <!-- 标注的图片 -->
        <div id="tagging_img">
          <div id="dingwei">
            <div id="circular">
              <!-- <img id="circularimg" src="../assets/img/yuan.png" > -->
              <div id="yuan"></div>
            </div>
            <div id="circular1">
              <!-- <img src="../assets/img/yuan.png" > -->
              <div id="yuan1"></div>
            </div>
            <div id="square">
              <img  id="squareimg" src="./../assets/img/fang.png" >
            </div>
            <div id="square1">
              <img src="../assets/img/fang.png" >
            </div>

            
            <div id="arrow">
              <img  id="arrowImg" src="./../assets/img/jiantou.png" >
            </div>
            <div id="arrow1">
              <img  src="./../assets/img/jiantou.png" >
            </div>
          </div>
          
        </div>
      </div>
    </form>

    <div class="row video-group" id="isShowVideo"  >
      <div class="col" >
        <p id="local-player-name" class="player-name"></p>
        <div id="local-player" class="player" ></div>
      </div>
      <!-- <div class="w-100"></div> -->
      <div class="col">
        <div id="remote-playerlist"></div>
      </div>
    </div>
  </div>
  <!-- <video autoplay ></video> -->

<!--  -->
  

  <script src="../assets/jquery-3.4.1.min.js"></script>
  <script src="../assets/bootstrap.bundle.min.js"></script>
  <script src="https://download.agora.io/sdk/release/AgoraRTC_N.js"></script>
  <script src="./basicLive.js"></script>
  <script src="https://sdk.herewhite.com/white-web-sdk/2.12.11.js"></script>
 
</body>
</html>